light mode
night mode
অ্যাজাক্স (Ajax)

উদাহরণ সহ JSONP এর মাধ্যমে ডেটা রিকোয়েস্ট করা

Web Development - অ্যাজাক্স (Ajax) - Ajax এবং JSONP (Ajax এবং JSONP এর মাধ্যমে Cross-Domain Request) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

JSONP এর মাধ্যমে Ajax রিকোয়েস্ট তৈরি করা একটি কার্যকর পদ্ধতি, যা Cross-Domain Request এর সীমাবদ্ধতা অতিক্রম করে। JSONP শুধুমাত্র GET রিকোয়েস্ট ব্যবহার করে কাজ করে এবং সার্ভার থেকে সরাসরি জাভাস্ক্রিপ্ট কোড লোড করে ব্রাউজারে এক্সিকিউট করে। নিচে একটি উদাহরণ দেওয়া হয়েছে যেখানে JSONP ব্যবহার করে Ajax রিকোয়েস্ট তৈরি করা হয়েছে এবং JSON ডেটা ফেচ করা হয়েছে।

উদাহরণ: JSONP এর মাধ্যমে Ajax Request (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP Data Request Example</title>
</head>
<body>
    <h1>JSONP Data Fetch Example</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- JSONP ডেটা এখানে দেখানো হবে -->
    </div>

    <script>
        // Callback function যা JSONP রেসপন্স হ্যান্ডল করবে
        function handleResponse(data) {
            var container = document.getElementById('data-container');
            container.innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
        }

        // JSONP রিকোয়েস্ট পাঠানোর ফাংশন
        function fetchData() {
            // <script> ট্যাগ তৈরি করা
            var script = document.createElement('script');
            // JSONP রিকোয়েস্ট URL সেট করা যেখানে callback=handleResponse ব্যবহার করা হয়েছে
            script.src = 'https://example.com/api?callback=handleResponse';

            // ডকুমেন্টে <script> ট্যাগ অ্যাড করা
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

উদাহরণের বিশ্লেষণ

Callback Function:

  • handleResponse ফাংশনটি ক্লায়েন্ট সাইডে তৈরি করা হয়েছে, যা সার্ভার থেকে প্রাপ্ত JSONP রেসপন্স হ্যান্ডল করে এবং HTML ডিভ (data-container) এ ডেটা প্রদর্শন করে।

Script Tag Creation:

  • fetchData() ফাংশন একটি <script> ট্যাগ তৈরি করে এবং সেটি ডকুমেন্টে যোগ করে। এর ফলে ব্রাউজার থেকে সার্ভার পর্যন্ত একটি JSONP রিকোয়েস্ট পাঠানো হয়।
  • URL এ callback=handleResponse পাঠানো হয়েছে, যা সার্ভারকে নির্দেশ করে যে JSON রেসপন্সটি handleResponse ফাংশনের মাধ্যমে প্রসেস করা হবে।

Server Response:

  • সার্ভার থেকে JSONP রেসপন্স এভাবে আসতে পারে:
handleResponse({
   "name": "John Doe",
   "age": 30
});
  • রেসপন্সটি সরাসরি ক্লায়েন্ট সাইডে এক্সিকিউট হয় এবং handleResponse ফাংশন কল হয়, যা ডেটা প্রসেস করে এবং UI এ প্রদর্শন করে।

২. সার্ভার সাইড JSONP রেসপন্স (PHP উদাহরণ):

<?php
// প্যারামিটার সংগ্রহ করা
$callback = $_GET['callback'];

// JSON ডেটা তৈরি করা
$data = array(
    "name" => "John Doe",
    "age" => 30
);

// JSONP রেসপন্স তৈরি করা
header('Content-Type: application/javascript');
echo $callback . '(' . json_encode($data) . ');';
?>

ব্যাখ্যা:

  • সার্ভার থেকে callback প্যারামিটার সংগ্রহ করা হয়েছে, যা ক্লায়েন্ট সাইডে পাঠানো হয়েছে (উদাহরণ: handleResponse)।
  • JSON ডেটা তৈরি করা হয়েছে এবং json_encode() ফাংশন ব্যবহার করে JSON ফরম্যাটে কনভার্ট করা হয়েছে।
  • JSONP রেসপন্সে callback ফাংশন (handleResponse) কল করা হয়েছে এবং JSON ডেটা তার প্যারামিটার হিসেবে পাঠানো হয়েছে।

JSONP এর মাধ্যমে ডেটা রিকোয়েস্ট করার সুবিধা

Cross-Domain Request সমাধান:

  • JSONP ব্যবহার করে Cross-Domain Request করা যায়, যা সাধারণ Ajax রিকোয়েস্টে Same-Origin Policy এর কারণে সম্ভব নয়। এটি সরাসরি জাভাস্ক্রিপ্ট কোড লোড করে, তাই ব্রাউজার এটিকে ব্লক করে না।

সহজ Implementation:

  • JSONP রিকোয়েস্ট তৈরি করা খুবই সহজ। একটি <script> ট্যাগ এবং একটি callback function দিয়ে এটি করা যায়।

Immediate Execution:

  • JSONP এর মাধ্যমে রেসপন্স সরাসরি ক্লায়েন্ট সাইডে এক্সিকিউট হয়, যা দ্রুত ডেটা প্রসেস করতে সাহায্য করে এবং ক্লায়েন্ট সাইডে রেসপন্স পাওয়া যায়।

 

আরও দেখুন...

উদাহরণ সহ JSONP এর মাধ্যমে ডেটা রিকোয়েস্ট করা

or

Don't have an account? Register

Promotion